<template>
	<view class="all">
		<view class="login" style="height:200px;">
			<image src="/static/image/me/backGround.jpg" style="height: 200px" class="loginbg"></image>
			<image :src="userInfo.avatarUrl?userInfo.avatarUrl:'/static/image/me/user_defaulthead@2x.png'" style="border-radius: 100px"
			 class="personal_logo" id="personal_logo"></image>
			<view class="userinfo">
				<button class="title" id="user_name" open-type="getUserInfo"  @tap="getUserInfo">
					{{userInfo.nickName?userInfo.nickName:"点击授权登录"}}
				</button>
				<!-- <view class="subtitle" id="shenfen">
            {{userInfo.certificationOk == 2?"已认证":"未认证"}}
        </view> -->
			</view>
			<!--<image src="/static/images/personal_icon_arrow.png" class="person_arrow"></image>-->
		</view>
		<!-- 第一块 -->
		<view class="thirdblock">
			<navigator class="item" url="./userinfo" data-index="1">
				<image src="/static/image/icon/PROFILE.svg" class="item_ico"></image>
				<span>身份资料</span>
				<!-- <image mode="aspectFit" src="/static/image/icon" class="item_arrow"></image> -->
			</navigator>
			<navigator class="item" bindtap="openOpt" data-index="myAccount">
				<image src="/static/image/icon/钱包.svg" class="item_ico"></image>
				<span>钱包账户</span>
				<!-- <image src="/static/image/me/right.png" class="item_arrow"></image> -->
			</navigator>
			<view class="h1"></view>
			<navigator class="item" bindtap="openOpt" data-index="bought">
				<image src="/static/image/icon/课程.svg" class="item_ico"></image>
				<span>我的课程</span>
				<!-- <image src="/static/image/me/right.png" class="item_arrow"></image> -->
			</navigator>
			<view class="h1"></view>
			<navigator class="item" bindtap="openOpt" data-index="favor">
				<image src="/static/image/icon/收藏.svg" class="item_ico"></image>
				<span>收藏</span>
				<!-- <image src="/static/image/me/right.png" class="item_arrow"></image> -->
			</navigator>
			<view class="h1"></view>

		</view>
		<!-- 第三块 -->
		<view class="h10"></view>
		<view class="thirdblock">
			<button class="item" open-type="feedback">
				<image src="/static/image/icon/咨询.svg" class="item_ico"></image>
				<span>意见反馈</span>
				<!-- <image src="/static/image/me/right.png" class="item_arrow"></image> -->
			</button>
			<view class="h1"></view>
			<navigator class="item" bindtap="openOpt" data-index="aboutUs">
				<image src="/static/image/icon/关于我们.svg" class="item_ico"></image>
				<span>关于我们</span>
				<!-- <image src="/static/image/me/right.png" class="item_arrow"></image> -->
			</navigator>
			<view class="h1"></view>
			<view class="h1"></view>
			<navigator class="item" bindtap="openOpt" data-index="setting">
				<image src="/static/image/icon/设置.svg" class="item_ico"></image>
				<span>设置</span>
				<!-- <image src="/static/image/me/right.png" class="item_arrow"></image> -->
			</navigator>
		</view>
	</view>
</template>

<script>

	const app = getApp()
	export default {
		data() {
			return {
			
			    hidden: true,
			    userInfo: null,
			}
		},
		computed: {
			
		},
		onLoad() {

		},
		onShow() {
			if (app.globalData.hasUserInfo) {
				//如果app之前已经获取UserInfo，则直接写入
				this.setData({
					userInfo: app.globalData.userInfo,
				})
			}
		},
		methods: {
			setData(newData){
				Object.keys(newData).forEach(k=>{
					console.log(k,this[k],newData)
					this[k] = newData[k]
				})
			},
			getUserInfo(result) {
				if(app.globalData.hasUserInfo)
					return 
				wx.getUserProfile({
					desc: '用于完善会员资料',
					success: res => {
					  // 可以将 res 发送给后台解码出 unionId
					app.globalData.userInfo = res.userInfo
					console.log('wx.getUserProfile',res)

					app.globalData.hasUserInfo = true;
					this.userInfo = res.userInfo;
					},
					fail: result=>{
						console.log(result)
						if (result.errMsg === 'getUserProfile:fail auth deny') {
							uni.showModal({
								title: '获取用户信息失败',
								content: '错误原因:您点击了拒绝',
								showCancel: false
							});
							return;
						}
					}
				})
				
			},
		}
	}
</script>

<style>
li {
    list-style: none;
}

html, body {
    width: 100%;
    min-height: 100%;
    background: #f0f0f0;
}

.h10 {
   
    background: #f0f0f0;
}

.h1 {
    height: 1px;
    margin: 0 15px;
    background: #f0f0f0;
}

.fr {
    float: right;
}

.hint {
    color: #666;
    font-size: 11px;
    margin-right: 5px;
}
.firstblock, .secondblock, .thirdblock {
    background-color: #fff;
    border: 10px solid #f0f0f0;
    font-size: 16px;
}

/* 头部登陆 */

.loginbg {
    width: 100%;
    -webkit-filter: blur(2px);
    filter: blur(2px);
}
.login{
   border: 10px solid #f0f0f0;
}
.login .personal_logo {
    position: absolute;
    left: 0;
    top: 55px;
    width: 70px;
    height: 70px;
    margin-left: 20px;
}

.person_arrow {
    position: absolute;
    height: 20rpx;
    right: 10px;
    width: 30rpx;
    top: 90px;
}

.login .userinfo {
    position: absolute;
    top: 80px;
    margin-left: 100px;
}

.login .userinfo .title {
    font-size: 20px;
    color: #fff;
    background: none;
    line-height: 1;
}

.login .userinfo .subtitle {
    font-size: 14px;
    color: #fff;
    border: 1px solid #fff;
    display: inline-block;
    padding: 3px;
    border-radius: 4px;
    margin-top: 5px;
}

/* 设置条目 */

.item {
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    background-color: #fff;
}

.item_ico {
    float: left;
    width: 50rpx;
    height: 50rpx;
    padding: 13px 15px 10px 0;
}

.item_arrow {
    float: right;
    height: 40rpx;
    width: 40rpx;
    padding: 25rpx 0;
}

.presshover {
    background-color: #fafafa;
}

.font_size {
    font-size: 16px;
    color: #333;
}

</style>
